<template>
  <div class="sub-card-home">
    <el-radio-group v-model="radio1" size="small" @change="reload">
      <el-radio-button label="面积"/>
      <el-radio-button label="数量"/>
    </el-radio-group>
    <div ref="chart" id="sub-left3" style="width: 100%;height:250px" v-if="radio1 === '面积'"/>
    <div ref="chart1" id="sub-left4" style="width: 100%;height:250px" v-if="radio1 === '数量'"/>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, onMounted, reactive, ref} from "vue";
import * as echarts from "echarts";

export default defineComponent({
  name: "quzhengmianji",
  setup() {
    const instance = getCurrentInstance();
    const api = instance?.appContext.config.globalProperties.api;
    let data = reactive([]);
    let data1 = reactive([]);
    let myChart = null
    let radio1 = ref('面积')
    const {appContext} = getCurrentInstance();
    let sum = reactive({
      value: '',
      area: '',
    })
    const reload = () => {
      appContext.config.globalProperties.axios.post(`api/class`)
          .then((response) => {
            data.length = 0
            data1.length = 0
            response.data.forEach(item => {
              let object: any = {}
              let object1: any = {}
              object.name = item.name
              object1.name = item.name
              object.value = item.value
              object1.value = item.area
              data.push(object)
              data1.push(object1)
            })
          })
      appContext.config.globalProperties.axios.post(`api/sum`)
          .then((response) => {
            response.data.forEach(item => {
              sum.value = item.value
              sum.area = item.area
            })
          })
      setTimeout(() => {
        let chart = document.getElementById('sub-left3');
        myChart = echarts.init(chart);
        let option1 = {
          title: {
            text: "总面积",
            subtext: sum.area + "亩",
            left: "center",
            top: "25%",
            itemGap: 0,
            textStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
            },
            subtextStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
              align: "center",
              verticalAlign: "middle"
            },
          },
          series: [
            {
              type: "pie",
              radius: ["60%", "40%"],
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}: \n{c}亩',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 400,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              data: data1,
              bottom: "35%",
              labelLine: {
                maxSurfaceAngle:30,
                length: 17,
                length2:10,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                },
              },
              labelLayout:{
                draggable:true
              }
            },
          ],
          legend: {
            data: data,
            icon: 'rect',
            textStyle: {
              color: 'rgba(251, 247, 247, 1)'
            },
            width: "100%",
            itemHeight: 9,
            bottom: "0%",
          },
        };
        myChart.setOption(option1)
      }, 1000)
      setTimeout(()=>{
        let chart = document.getElementById('sub-left4');
        myChart = echarts.init(chart);
        let option = {
          title: {
            text: "总数量",
            subtext: sum.value + "个",
            left: "center",
            top: "25%",
            itemGap: 0,
            textStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
            },
            subtextStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
              align: "center",
              verticalAlign: "middle"
            },
          },
          series: [
            {
              type: "pie",
              radius: ["60%", "40%"],
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}:\n {c}个',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              data: data,
              bottom: "35%",
              labelLine: {
                length: 17,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              },
              labelLayout:{
                draggable:true
              }
            },
          ],
          legend: {
            data: data,
            icon: 'rect',
            textStyle: {
              color: 'rgba(251, 247, 247, 1)'
            },
            width: "100%",
            itemHeight: 9,
            bottom: "0%",
          },
        };
        myChart.setOption(option)
      },1000)
    }
    onMounted(() => {
      reload()
    })

    return {
      data,
      reload,
      sum,
      radio1
    }
  }
})
</script>


<style scoped lang="scss">
.sub-card-home {
  color: #fff;

  .el-radio-group {
    margin-left: 74%;
    flex-wrap: nowrap;
  }
}

.sub-card-home .number {
  width: 17px;
  height: 24px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #D6A356;
}

.sub-card-home .name {
  position: absolute;
  width: 48px;
  height: 24px;
  right: 70%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
}

.sub-card-home .value {
  position: absolute;
  //width: 17px;
  height: 24px;
  right: 43%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  text-align: right;
  color: #D6A356;
}

.sub-card-home .units {
  position: absolute;
  width: 16px;
  height: 24px;
  right: 37%;

  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  color: #FFFFFF;
}

.sub-card-home .area {
  position: absolute;
  width: 20px;
  height: 24px;
  right: 28%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  text-align: right;
  color: #D6A356;
}

.sub-card-home .units1 {
  position: absolute;
  width: 16px;
  height: 24px;
  right: 19%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  text-align: right;
  color: #FFFFFF;
}

.sub-card-home .percent {
  position: absolute;
  width: 17px;
  height: 24px;
  right: 10%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  text-align: right;
  color: #D6A356;
}

.sub-card-home .units2 {
  position: absolute;
  width: 16px;
  height: 24px;
  right: 5%;

  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  text-align: right;
  color: #FFFFFF;
}

.sub-card-home .divide {

  width: 360px;

  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>

